
* {
  padding: 0;
  margin: 0;
  user-select: none;
}
body {
  width: 100vw;
  height: 100vh;
  background-size: 100vw 100vh;
  perspective: 100px;
  transform-style: preserve-3d;
  overflow-y: auto;
}

$img-start:'../static/img1.jpg';
$img-end:'../static/img2.jpg';
$img-1:'../static/city/city1.jpg';
$img-2:'../static/city/city2.jpg';
$img-3:'../static/city/city3.jpg';
$img-4:'../static/city/city4.jpg';
$img-5:'../static/city/city5.jpg';
$img-6:'../static/city/city6.jpg';
$imgArr:$img-1 $img-2 $img-3 $img-4 $img-5 $img-6;

.container{
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;

  .start,.end{
    width: 100vw;
    height: 100vh;
    background-image: url($img-start);
    background-size: cover;
    font: 80px 'Modern Antiqua', cursive;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .end{
    background-image: url($img-end);
  }
  @for $i from 1 to 7 {
    .img#{$i}{
      width: 100vw;
      height: 100vh;
      background-image: url(#{nth($imgArr,$i)});
      background-size: cover;
    }
  }

}